<template lang="">
    <layout>
        <selfBtn biaoti="按钮" status="success" @click="show=!show" />
        <circleRef v-if="show" />
    </layout>
</template>
<script>
import layout from '@/zujian/layout.vue';
import circle from '@/zujian/circle.vue';
import selfBtn from '@/zujian/selfBtn.vue';
export default {
    components: {
        layout,
        circleRef: circle,
        selfBtn
    },
    data() {
        return {
            show: true
        }
    }
}
</script>
<style lang="scss" scoped>
    .aap-1{
        background-color: red;
    }
</style>
\ No newline at end of file
 +2 -1 src/main.js  100644 -> 100644
@@ -8,7 +8,8 @@ import { createApp } from 'vue'
// import App from './demo/demo6.vue'
// import App from './demo/demo7.vue'
// import App from './demo/demo8.vue'
import App from './demo/demo9.vue'
// import App from './demo/demo9.vue'
import App from './demo/demo10.vue'
// import App from './work/checkWork.vue'
// import App from './App.vue'
import './style/index.css'
 +36 src/zujian/circle.vue  0 -> 100644
<template lang="">
    <div id='ddd'>
        {{ text }}
    </div>
</template>
<script>
export default {
    data() {
        return {
            text: '我是周期组件'
        }
    }, 
    beforeCreate() {
        console.log('实例化了--beforeCreate', this.text);
        console.log('dom-beforeCreate', document.getElementById('ddd'));
    },
    created() {
        console.log('实例化了-created', this.text);
        console.log('dom-created', document.getElementById('ddd'));
    },
    mounted() {
        console.log('实例化了-mounted', this.text);
        console.log('dom-mounted', document.getElementById('ddd'));
    },
    beforeUnmount() {
        console.log('实例化了-beforeUnmount', this.text);
        console.log('dom-beforeUnmount', document.getElementById('ddd'));
    }
}
</script>
<style lang="scss" scoped>
    #ddd{
        background-color: brown;
        color: #fff;
    }
</style>
\ No newline at end of file
 +71 src/zujian/layout.vue  0 -> 100644
<template lang="">
    <div class="layout-box">
        <div class="banner-box"></div>
        <div class="bottom-box">
            <div class="left-box">left</div>
            <div class="right-box">
                <div class="content-box">
                   <div class="ab-box">
                        <slot />
                   </div>
                </div>
                <div class="foot-box">
                    石家庄财经职业学院 版权所有 冀ICP备xxxxxxxxx号 © 2013-2025 Corporation,All Rights Reserved
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    
}
</script>
<style lang="scss" scoped>
    .layout-box{
        height: 100vh;
        background-color: red;
        --banner-hight: 92px;
        .banner-box{
            height: var(--banner-hight);
            background-color: green;
        }
        .bottom-box{
            background-color: bisque;
            height: calc(100% - var(--banner-hight));
            display: flex;
            .left-box{
                background-color: orange;
                width: 288px;
            }
            .right-box{
                background-color: aquamarine;
                flex: 1;
                display: flex;
                flex-direction: column;
                .content-box{
                    background-color: #fff;
                    flex: 1;
                    position: relative;
                    .ab-box{
                        position: absolute;
                        top: 0;
                        left: 0;
                        bottom: 0;
                        right: 0;
                        background: red;
                        overflow: auto;
                    }
                }
                .foot-box{
                    background-color: beige;
                    height: 50px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }

        }
    }
</style>